<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<link rel="stylesheet" href="css/index.css" />
	<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/vant.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/ajax.js" type="text/javascript" charset="utf-8"></script>
	<script src="html5plus://ready"></script>
	<style type="text/css">
		.toast{
			z-index: 2;
		}
	</style>
</head>
<body>
	<div id="app">
		<van-tabbar v-model="active" @change="tabChange" v-show="isShow">
		  <van-tabbar-item icon="shop-o">首页</van-tabbar-item>
		  <van-tabbar-item icon="apps-o">分类</van-tabbar-item>
		  <van-tabbar-item icon="shopping-cart-o">购物车</van-tabbar-item>
		  <van-tabbar-item icon="contact">个人中心</van-tabbar-item>
		</van-tabbar>
	</div>
	<script type="text/javascript">
		var vm=new Vue({
			el:"#app",
			data:{
				value:"",
				active:0,
				isShow:true,
				//定义视图链接及ID
				views:[{
						name:"Main",
						url:"views/Main.html",
					},
					{
						name:"Sort",
						url:"views/Sort.html",
					},
					{
						name:"Shopping",
						url:"views/ShoppingCart.html",
					},
					{
						name:"Person",
						url:"views/Person.html",
					}
				]
			},
			mounted:function(){
				this.$nextTick(function () {
					// 初始化
				});
				var _this=this;
				//获取总的WebView
				var rWbv=plus.webview.getLaunchWebview();
				//通过循环创建子WebView
				for(var i = 0; i < this.views.length ; i++){
					var sWbv=plus.webview.create(this.views[i].url,this.views[i].name,{
						top:"0px",
						bottom:"50px",
						scrollIndicator:"none",
						zindex:1
					})
					rWbv.append(sWbv);
				}
				plus.webview.show(this.views[0].name);//根据唯一标识Id显示
				window.addEventListener("resize",function(){
					_this.isShow=!_this.isShow;
				})
			},
			methods:{
				tabChange:function(){
					plus.webview.show(this.views[this.active].name);
					sessionStorage["active"]=this.active;
				},
			}
		})
	</script>
</body>
</html>